<!--
 * @Author: Songjq
 * @Date: 2022-01-19 15:11:56
 * @Desscription: 换绑邮箱
-->
<template>
  <el-dialog
    title="换绑邮箱"
    :visible.sync="dialogVisible"
    :before-close="reset"
    :close-on-click-modal="false"
    width="420px"
    append-to-body
  >
    <el-form
      ref="form"
      :model="form"
      label-width="0px"
      :rules="loginRules"
    >
      <el-form-item prop="email">
        <el-input
          autocomplete="new-password"
          v-model="form.email"
          type="text"
          prefix-icon="el-icon-message"
          placeholder="账户邮箱"
          size="medium"
          class="ui-flex-1"
          :readonly="step == 2"
        ></el-input>
      </el-form-item>

      <el-form-item
        prop="code"
        v-if="step == 1"
      >
        <div class="ui-flex">
          <el-input
            v-model="form.code"
            placeholder="验证码"
            @keyup.enter.native="nextStep"
            class="ui-flex-1"
            size="medium"
          >
            <svg-icon
              slot="prefix"
              icon-class="validCode"
              class="el-input__icon input-icon ui-mgl-6"
            />
          </el-input>
          <div class="login-code">
            <img
              :src="codeUrl"
              @click="getCode"
            >
          </div>
        </div>
      </el-form-item>

      <el-form-item
        prop="emailCode"
        v-else
      >
        <el-input
          v-model="form.emailCode"
          placeholder="邮箱验证码"
          @keyup.enter.native="submit"
          class="ui-flex-1"
          size="medium"
        >
          <svg-icon
            slot="prefix"
            icon-class="validCode"
            class="el-input__icon input-icon ui-mgl-6"
          />
        </el-input>
      </el-form-item>
    </el-form>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="reset">取消</el-button>
      <el-button
        type="primary"
        @click="nextStep"
        :loading="loading"
        v-if="step == 1"
      >下一步</el-button>
      <el-button
        v-else
        type="primary"
        @click="submit"
        :loading="loading"
      >保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { sendMail } from "@http/login.js";
import { postUsersChangeEmail } from "@http/system/user.js";
export default {
  data() {
    return {
      dialogVisible: false, // 更换密码
      form: {
        email: "",
        emailCode: "",
        code: "",
      },
      loginRules: {
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        emailCode: [
          { required: true, trigger: "blur", message: "邮箱验证码不能为空" },
        ],
        code: [{ required: true, trigger: "blur", message: "验证码不能为空" }],
      },
      loading: false,
      btnDisabled: false,
      codeUrl: "",
      step: 1,
    };
  },
  created() {
    this.getCode();
  },
  methods: {
    /**
     * @Author: Songjq
     * @Date: 2021-12-16 21:37:53
     * @Fn: 获取验证码
     */
    getCode() {
      this.codeUrl = `${process.env.VUE_APP_BASE_API}api/code?${Math.random()}`;
    },

    /**
     * @Author: Songjq
     * @Date: 2022-02-09 18:07:35
     * @Fn: 重置表单
     */
    reset() {
      this.dialogVisible = false;
      this.form = {
        email: "",
        emailCode: "",
        code: "",
      };
      this.step = 1;
    },
    /**
     * @Author: Songjq
     * @Date: 2022-01-19 15:30:24
     * @Fn: 发送验证码
     */
    nextStep() {
      this.loading = true;
      sendMail({
        email: this.form.email,
        code: this.form.code,
      })
        .then((res) => {
          this.$notify({
            title: res.message,
            type: "success",
          });
          this.loading = false;
          this.step = 2;
        })
        .catch(() => {
          this.loading = false;
        });
    },

    /**
     * @Author: Songjq
     * @Date: 2022-01-19 15:49:17
     * @Fn: 换绑邮箱
     */
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.loading) return;
          this.loading = true;
          postUsersChangeEmail({
            email: this.form.email,
            emailCode: this.form.emailCode,
          })
            .then((res) => {
              this.$notify({
                title: res.message,
                type: "success",
              });
              this.dialogVisible = false;
              this.loading = false;
              this.$emit("init");
              this.reset();
            })
            .catch((err) => {
              this.loading = false;
              console.log(err);
            });
        }
      });
    },
  },
};
</script>
<style scope lang="less">
</style>